<template>
  <div class="micro-goods-box">
    <div class="design-preview-controller">
      <div class="goods-list">
        <div v-for="(item,index) in goodsList"
             :key="index"
             class="goods-li"
             :class="{isGoodCell3:formData.size === 3, isGoodCell1:formData.size === 1}">
          <div class="goods-li-box"
               :class="{'no-goods-price':!formData.showContent.find(x=>x===3)&&formData.showContent.find(x=>x===4)}">
            <div class="goods-item"
                 :class="{goodsItem1:formData.size === 1}">
              <!--图片-->
              <div class="goods-img-one"
                   :class="{goodsImgOne1:formData.size === 1}"
                   :style="{backgroundImage:'url('+item.pic+')'}"></div>
              <!--end 图片-->
              <div class="goods-box-info"
                   :class="{goodsBoxInfo1:formData.size === 1}">
                <div v-if="formData.showContent.find(x=>x===1)"
                     class="goods-info-title">{{ item.prodName }}
                </div>
                <div v-if="formData.showContent.find(x=>x===2)&&item.brief"
                     class="goods-info-desc">
                  {{ item.brief }}
                </div>
                <div v-if="formData.showContent.find(x=>x===3)||formData.showContent.find(x=>x===4)"
                     class="goods-info-price "
                     :class="{'goods-cell-3':formData.showContent.find(x=>x===4)}">
                  <div v-if="formData.showContent.find(x=>x===3)"
                       class="price-info"><span>¥</span>{{ item.price }}
                  </div>
                  <!--  
                    v-if="formData.showContent.find(x=>x===4)"
                    :class="['goods-info-buy-btn','btn-type-'+formData.buy_btn_type]"
                  >
                    <i v-if="formData.buy_btn_type===1" :class="['btn-type-'+formData.buy_btn_type]"></i>
                    <i v-if="formData.buy_btn_type===2" class="el-icon-circle-plus-outline"></i>
                    <i v-if="formData.buy_btn_type===3" class="el-icon-goods"></i>
                    <i v-if="formData.buy_btn_type===4" class="el-icon-s-goods"></i>
                    <el-button
                      v-if="formData.buy_btn_type>=5"
                      :round="formData.buy_btn_type>=7"
                      size="mini"
                      :type="formData.buy_btn_type | buy_btn_type"
                    >{{ formData.button_text || '马上抢' }}
                    </el-button>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="empty-tips"
             v-if="goodsList.length==0">
          {{$t('shopFeature.goods.pleaseAddProd')}}
        </div>
      </div>
    </div>

    <div v-if="isShowEdit"
         class="design-editor-item design-hide-class">
      <div class="design-config-editor">
        <div class="design-editor-component-title">{{$t('shopFeature.goods.prod')}}</div>
        <!--选择商品-->
        <div class="goods-select-shops">
          <div class="goods-select-control-group">
            <div class="goods-select-label">{{$t('shopFeature.goods.prod')}}</div>
            <div class="goods-select-list">
              <div v-for="(item,index) in goodsList"
                   :key="index"
                   class="goods-select-item">
                <div class="goods-select-item-img"
                     :style="{backgroundImage:'url('+item.pic+')'}"></div>
                <span class="close-item"
                      @click="goodsList.splice(index,1)">x</span>
              </div>
              <div class="goods-select-item">
                <div :style="{cursor:'pointer'}"
                     class="goods-select-item-img"
                     @click="selectProdHandle">+
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="padding: 20px 0;background: #fff">
          <el-form ref="formData" :model="formData">
            <el-form-item :label="$i18n.t('shopFeature.goods.listStyle')">
              <el-radio-group v-model="formData.size">
                <el-radio v-for="(count, index) in lineSize" :label="count.value" :key="index">{{count.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.goods.showContent')">
              <el-checkbox-group v-model="formData.showContent">
                <el-checkbox v-for="(showItem, index) in goodsShowContent" :key="index" :label="showItem.value">{{showItem.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <prods-select v-if="dialogChooseGoods"
                  ref="ProdsSelect"
                  @refreshSelectProds="chooseGoodsFun"></prods-select>
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
